<template>
	<div class="status-table">
		<table class="table table-hover">
			<thead>
				<tr>
					<th>ID</th>
					<th>{{ $t('username') }}</th>
					<th>{{ $t('problem') }}</th>
					<th>{{ $t('result') }}</th>
					<th>{{ $t('memory') }}</th>
					<th>{{ $t('used_time') }}</th>
					<th>{{ $t('language') }}</th>
					<th>{{ $t('code.length') }}</th>
					<th>{{ $t('submit_time') }}</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in status" :key="item.id">
					<td>
						<RouterLink class="link-color" :to="solutionUrl(item.id)">
							{{ item.id }}
						</RouterLink>
					</td>
					<td>
						<RouterLink class="link-color" :to="userInfoUrl(item.userId)">
							{{ item.username }}
						</RouterLink>
					</td>
					<td>
						<RouterLink class="link-color" :to="problemUrl(item)">
							{{ item[idAttr] }}
						</RouterLink>
					</td>
					<td :class="item.resultClass">
						{{ $t('result.' + item.resultName) }}
					</td>

					<td>{{ item.memoryUsed }}</td>
					<td>{{ item.timeUsed }}</td>
					<td>{{ item.languageName }}</td>
					<td>{{ item.codeLength }}</td>
					<td>{{ item.createTime }}</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>


<script type="module">
import { Router } from '@/common/common.object';

export default {
	props: ['status', 'contestId', 'idAttr'],
	data() {
		return {
			isProblem: false,
		};
	},
	created() {
		this.isProblem = 'problemId' === this.idAttr;
	},
	methods: {
		problemUrl(item) {
			if (this.isProblem) {
				return Router.page.problem(item[this.idAttr]);
			}

			return Router.page.contest.problem(
				this.contestId, item.problemId);
			// 		this.contestId, item["identifier"]);
		},
		userInfoUrl(userId) {
			return Router.page.user.judgeInfo(userId);
		},
		solutionUrl(id) {
			return Router.page.solution(id, this.contestId);
		}
	}
}
</script>


<style scoped>
table>tbody>tr {
	cursor: pointer;
}

table>thead>tr>th {
	border-top: none !important;
}

.search-box>form>.form-group {
	padding: 0 15px;
}
</style>
